<template>
  <!-- 导航区 -->
  <div class="news">
    <ul>
      <li v-for="k in newsList" :key="k.id">
        <!-- <RouterLink :to="`/news/detail/${k.id}/${k.title}/${k.content}`">{{ k.title }}</RouterLink> 第一种写法 -->
        <RouterLink
          :to="{
            name: 'xiangqing',
            // param不能传对象或数组 路径只能用name方式
            query: {
              id: k.id,
              title: k.title,
              content: k.content,
            },
          }"
          >{{ k.title }}</RouterLink
        >
      </li>
    </ul>
  </div>
  <!-- 展示区 -->
  <div class="newContents">
    <RouterView></RouterView>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from "vue";
import { RouterView, RouterLink } from "vue-router";

const newsList = reactive([
  { id: "dfafsa", title: "很好的抗癌物质", content: "西蓝花" },
  { id: "dsaf", title: "吃多了鸡蛋会有害吗", content: "少吃" },
  { id: "dfsa", title: "蔬菜每天吃多少合适", content: "多吃" },
  { id: "fgd", title: "找工作一般耗时多久", content: "三个月" },
]);
</script>

<style scoped>
/* 全局样式设置，去除默认的内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器样式，使用 flexbox 布局 */
.container {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;
}

/* 新闻容器样式 */
.news {
  width: 300px; /* 设置容器宽度 */
  background-color: #f9f9f9; /* 背景颜色 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 5px; /* 圆角 */
  padding: 15px; /* 内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
  margin-right: 20px;
}

/* 无序列表样式 */
.news ul {
  list-style-type: none;
  /* 去除默认列表样式 */
}

/* 列表项样式 */
.news li {
  padding: 8px 0; /* 上下内边距 */
  border-bottom: 1px solid #eee; /* 底部边框 */
}

/* 最后一个列表项去除底部边框 */
.news li:last-child {
  border-bottom: none;
}

/* 链接样式 */
.news a {
  color: #007bff; /* 链接颜色 */
  text-decoration: none; /* 去除下划线 */
  transition: color 0.3s ease; /* 颜色过渡效果 */
}

/* 链接悬停样式 */
.news a:hover {
  color: #0056b3; /* 悬停时链接颜色 */
  text-decoration: underline; /* 悬停时显示下划线 */
}

/* 展示区样式 */
.newContents {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
</style>
